﻿<template>
    <div>
        <div style="height:60px"></div>
	    <canvas id="mc" width="1350px" height="300px" style="position: absolute;z-index:2;left: 0;top:-20px;"></canvas>
        <div class="headers-main">
            <div class="headers-left">
                <input v-model="info" type="text" placeholder="搜索一下">
                <i class="el-icon-search" @click="getInfo"></i>
            </div>
            <div class="headers-right">
                <el-menu :default-active="this.$route.path" router class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <el-menu-item index="/Homepage">首页</el-menu-item>
                    <el-menu-item index="/Blog">全网博客</el-menu-item>
                    <el-menu-item index="/concat">给ta留言</el-menu-item>
                    <el-menu-item index="/myBlog/myArtical">我的</el-menu-item>
                </el-menu> 
            </div>
        </div>
        <router-view/>
    </div>
</template>

<script>
import {back} from "../assets/js/background.js"
    

    
export default {
    name:'name',
    components:{},
    data() {
      
	return {

        activeIndex: '1',

        activeIndex2: '1',

        judge:'/myBlog',
        info:''

      };
    
	},
    methods: {

        handleSelect(key, keyPath) {

        console.log(key, keyPath);

      },

      backGround:function(){

        back()

      },
      getInfo(){
          this.$router.push({path:"/searchResult",query:{
              info:this.info
          }
          })
          
          
      }

    },

    mounted:function(){

      this.backGround()

    }

}
</script>

<style>
    .headers-main{
        display: flex;
        position: fixed;
        z-index: 3;
        top:0;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        background-color: rgb(84, 92, 100);
    }
    .el-menu.el-menu--horizontal{
        width: 100%;
    }
    .el-menu>.el-menu-item{
        padding: 0 40px;
    }
    .headers-left{
        display: flex;
        align-items: center;
        width: 248px;
        justify-content: center;
        color: #fff;
        border-radius: 28px;
        border: 1px solid #fff;
        height: 38px;
        margin-left: 35px;
    }
    .headers-left>input{
        height: 26px;
        background-color: rgb(84, 92, 100);
        border: none;
        width: 200px;
        outline: none;
        color: #fff;
    }
    .headers-right{
        width: 500px;
    }
</style>